<template>
  <div>
    <el-form :inline="true" :model="dataForm" @keyup.enter="getDataList(true)">
      <el-form-item>
        <el-input v-model="dataForm.userName" placeholder="用户名" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="getDataList(true)">查询</el-button>
        <el-button type="primary" @click="addOrUpdateHandle()">新增</el-button>
        <el-button type="danger" @click="deleteHandle()" :disabled="state.dataListSelections.length <= 0">批量删除</el-button>
      </el-form-item>
    </el-form>
    <el-table
      style="width: 100%"
      :data="state.dataList"
      border
      v-loading="state.dataListLoading"
      @selection-change="selectionChangeHandle">
      <el-table-column
        type="selection"
        header-align="center"
        align="center"
        width="50"
      />
      <el-table-column
          prop="id"
          header-align="center"
          align="center"
          width="80"
          label="ID">
        </el-table-column>
        <el-table-column
          prop="username"
          header-align="center"
          align="center"
          label="用户名">
        </el-table-column>
        <el-table-column
          prop="status"
          header-align="center"
          align="center"
          label="状态">
          <template #default="scope">
            <el-tag v-if="scope.row.status === 0" size="small" type="danger">禁用</el-tag>
            <el-tag v-else size="small">正常</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="createTime"
          header-align="center"
          align="center"
          width="180"
          label="创建时间">
        </el-table-column>
        <el-table-column
          fixed="right"
          header-align="center"
          align="center"
          width="150"
          label="操作">
          <template #default="scope">
            <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">修改</el-button>
            <el-button type="text" size="small" @click="deleteHandle(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
    </el-table>
    <el-pagination
      layout="total, sizes, prev, pager, next, jumper"
      v-model:currentPage="state.pageIndex"
      :page-size="state.pageSize"
      :page-sizes="[10, 20, 50, 100]"
      :total="state.totalPage"
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
    />
    <AddOrUpdate ref="addOrUpdate" @refreshDataList="getDataList" />
  </div>
</template>
<script lang='ts' setup>
import { reactive, onActivated, onDeactivated } from 'vue'
import { getList, deleteUser } from '@/api/sys/user'
import { ElMessage, ElMessageBox } from 'element-plus'
import AddOrUpdate from './user-add-or-update.vue'

const state = reactive({
  dataList: [],
  pageIndex: 1,
  pageSize: 10,
  totalPage: 0,
  totalCount: 0,
  dataListLoading: false,
  dataListSelections: []
})

const dataForm = reactive({
  userName: ''
})
// 获取数据列表
const getDataList = (search: boolean = false) => {
  state.dataListLoading = true
  getList({
    page: search ? 0 : state.pageIndex,
    limit: state.pageSize,
    username: dataForm.userName
  }).then(({ data }) => {
    if (data && data.code === 0) {
      state.dataList = data.page.list
      state.totalPage = data.page.totalPage
      state.totalCount = data.page.totalCount
    } else {
      state.dataList = []
      state.totalPage = 0
    }
    state.dataListLoading = false
  })
}
// 每页数
const sizeChangeHandle = (val: number) => {
  state.pageSize = val
  state.pageIndex = 1
  getDataList()
}
// 当前页
const currentChangeHandle = (val: number) => {
  state.pageIndex = val
  getDataList()
}
// 多选
const selectionChangeHandle = (val: any) => {
  state.dataListSelections = val
}

const addOrUpdate = $ref()

function addOrUpdateHandle(id: number = 0) {
  addOrUpdate.init(id)
}
// 删除
function deleteHandle (id: number = 0) {
  var id = id ? [id] : state.dataListSelections.map(item => {
    return item.id
  })
  ElMessageBox.confirm(`确定对[id=${id.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    deleteUser(id).then(({data}) => {
    if (data && data.code === 0) {
      ElMessage({
        message: '操作成功',
        type: 'success',
        duration: 1500,
        onClose: () => {
          getDataList()
        }
      })
    } else {
      ElMessage.error(data.msg)
    }
  })
  }).catch(() => {})
}

onActivated(() => {
  getDataList()
})

onDeactivated(() => {
  console.log(1)
})
</script>